<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-form label-width="100px" :inline="true" size="normal">
        <el-form-item label="一级分类">
          <el-select
            :disabled="disabled"
            v-model="$store.state.category.category1id"
            placeholder="请选择"
            clearable
            filterable
            @change="StoregetCategory2List"
          >
            <el-option
              :value="item.id"
              :label="item.name"
              v-for="item in category1list"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select
            :disabled="disabled"
            v-model="$store.state.category.category2id"
            placeholder="请选择"
            clearable
            filterable
            @change="StoregetCategory3List"
          >
            <el-option
              :value="item.id"
              :label="item.name"
              v-for="item in category2list"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select
            :disabled="disabled"
            v-model="$store.state.category.category3id"
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              :value="item.id"
              :label="item.name"
              v-for="item in category3list"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Attr",
  data() {
    return {};
  },
  props: ["disabled"],
  methods: {
    ...mapActions("category", [
      "StoregetCategory1List",
      "StoregetCategory2List",
      "StoregetCategory3List",
    ]),
  },
  mounted() {
    this.StoregetCategory1List();
  },
  computed: {
    ...mapState("category", ["category1id", "category2id", "category3id"]),
    ...mapState("category", [
      "category1list",
      "category2list",
      "category3list",
    ]),
  },
};
</script>

<style >
</style>